import { ElMessage } from 'element-plus'
import { startsApi, getNowGanZhiApi, ganZhiToDateApi } from '@/api/gongju/liuyaopaipan-api.js' // 六爻排盘API接口
import { dateFormatter1 } from '@/assets/js/main.js'

export default {
  el: 'app',
  data() {
    return {
      /* 完整数据 */
      data: {}, // 完整数据
      dataStatus: false, // 完整数据状态（true:存在。false:不存在）
      /* 默认数据 */
      dataD: {}, // 默认数据
      dataDStatus: false, // 默认数据状态（true:存在。false:不存在）

      /* 选项 */
      name: null, // 姓名
      occupy: null, // 占事
      sex: 1, // 性别
      sexOptions: [
        { value: '男', label: 1 },
        { value: '女', label: 0 }
      ],
      date: '', // 日期
      dateType: 0, // 日期类型
      dateTypeOptions: [
        { value: '公历', label: 0 },
        { value: '农历', label: 1 },
        { value: '四柱', label: 2 }
      ],
      leapMonth: false, // 是否闰月（true:是。false:否）
      trueSolar: false, // 是否真太阳时（true:是。false:否）
      address: '110000', // 地区：城市编码
      addressName: '北京市', // 地区：城市名称
      qiGuaMode: 0, // 起卦模式
      qiGuaModeOptions: [
        { value: 0, label: '日期起卦' },
        { value: 1, label: '自动起卦' },
        { value: 2, label: '手动起卦' }
      ],
      liuYao: 0, // 上爻（六爻）
      wuYao: 0, // 五爻
      siYao: 0, // 四爻
      sanYao: 0, // 三爻
      erYao: 0, // 二爻
      yiYao: 0, // 初爻（一爻）
      yaoOptions: [
        { value: 0, label: '—（2正1背）' },
        { value: 1, label: '- -（1正2背）' },
        { value: 2, label: '— ○（0正3背）' },
        { value: 3, label: '- - ×（3正0背）' }
      ],
      yearGanZhiSet: 1, // 年干支设置
      yearGanZhiSetOptions: [
        { value: 0, label: '以正月初一作为新年的开始' },
        { value: 1, label: '以立春当天作为新年的开始' },
        { value: 2, label: '以立春交接的时刻作为新年的开始' }
      ],
      monthGanZhiSet: 1, // 月干支设置
      monthGanZhiSetOptions: [
        { value: 0, label: '以节交接当天起算' },
        { value: 1, label: '以节交接时刻起算' }
      ],
      dayGanZhiSet: 1, // 日干支设置
      dayGanZhiSetOptions: [
        { value: 0, label: '晚子时日干支算明天' },
        { value: 1, label: '晚子时日干支算当天' }
      ],
      hourGanZhiSet: 0, // 时干支设置
      hourGanZhiSetOptions: [{ value: 0, label: '支持早子时和晚子时' }],
      startsButton: false, // 排盘按钮状态（true:正在排盘。false:未排盘）
      startsDelayTime: 0, // 排盘延迟时间（单位：毫秒）
      dateStatus: true, // & 日期可选状态（true:可选。false:不可选）

      /* 重新加载 */
      reLoadingButton: true, // 重新加载按钮状态（true:可用。false:禁用）

      /* 快捷 */
      sixGuaIndex: [5, 4, 3, 2, 1, 0], // 六爻从上至下索引
      
      /* 弹窗 */
      seniorDialog: false, // 高级选项弹窗状态（true:显示。false:隐藏）
      siZhuDialog: false, // 四柱转日期弹窗状态（true:显示。false:隐藏）

      /* 四柱转日期 */
      siZhuToDateColumns: [
        // 日期表格标题
        { type: 'index', title: '序号', width: 60, align: 'center', resizable: true },
        { title: '公历日期', key: 'solar', width: 150, align: 'center', resizable: true },
        { title: '农历日期', key: 'lunar', width: 200, align: 'center', resizable: true },
        { title: '操作', slot: 'action', align: 'center', resizable: true }
      ],
      siZhuToDate: [], // 日期
      siZhuToDateTotal: 0, // 日期条数
      siZhuButton: false, // 四柱转日期按钮状态（true:获取中。false:未获取）
      beginYear: 1900, // 起始年
      beginYear2: 0, // 起始年
      yearGanZhi: null, // 年干支
      monthGanZhi: null, // 月干支
      dayGanZhi: null, // 日干支
      hourGanZhi: null, // 时干支
      ganZhiOptions: [
        // 六十甲子
        { value: '甲子', label: '甲子' },
        { value: '甲戌', label: '甲戌' },
        { value: '甲申', label: '甲申' },
        { value: '甲午', label: '甲午' },
        { value: '甲辰', label: '甲辰' },
        { value: '甲寅', label: '甲寅' },
        { value: '乙丑', label: '乙丑' },
        { value: '乙亥', label: '乙亥' },
        { value: '乙酉', label: '乙酉' },
        { value: '乙未', label: '乙未' },
        { value: '乙巳', label: '乙巳' },
        { value: '乙卯', label: '乙卯' },
        { value: '丙寅', label: '丙寅' },
        { value: '丙子', label: '丙子' },
        { value: '丙戌', label: '丙戌' },
        { value: '丙申', label: '丙申' },
        { value: '丙午', label: '丙午' },
        { value: '丙辰', label: '丙辰' },
        { value: '丁卯', label: '丁卯' },
        { value: '丁丑', label: '丁丑' },
        { value: '丁亥', label: '丁亥' },
        { value: '丁酉', label: '丁酉' },
        { value: '丁未', label: '丁未' },
        { value: '丁巳', label: '丁巳' },
        { value: '戊辰', label: '戊辰' },
        { value: '戊寅', label: '戊寅' },
        { value: '戊子', label: '戊子' },
        { value: '戊戌', label: '戊戌' },
        { value: '戊申', label: '戊申' },
        { value: '戊午', label: '戊午' },
        { value: '己巳', label: '己巳' },
        { value: '己卯', label: '己卯' },
        { value: '己丑', label: '己丑' },
        { value: '己亥', label: '己亥' },
        { value: '己酉', label: '己酉' },
        { value: '己未', label: '己未' },
        { value: '庚午', label: '庚午' },
        { value: '庚辰', label: '庚辰' },
        { value: '庚寅', label: '庚寅' },
        { value: '庚子', label: '庚子' },
        { value: '庚戌', label: '庚戌' },
        { value: '庚申', label: '庚申' },
        { value: '辛未', label: '辛未' },
        { value: '辛巳', label: '辛巳' },
        { value: '辛卯', label: '辛卯' },
        { value: '辛丑', label: '辛丑' },
        { value: '辛亥', label: '辛亥' },
        { value: '辛酉', label: '辛酉' },
        { value: '壬申', label: '壬申' },
        { value: '壬午', label: '壬午' },
        { value: '壬辰', label: '壬辰' },
        { value: '壬寅', label: '壬寅' },
        { value: '壬子', label: '壬子' },
        { value: '壬戌', label: '壬戌' },
        { value: '癸酉', label: '癸酉' },
        { value: '癸未', label: '癸未' },
        { value: '癸巳', label: '癸巳' },
        { value: '癸卯', label: '癸卯' },
        { value: '癸丑', label: '癸丑' },
        { value: '癸亥', label: '癸亥' }
      ],
      yearGanZhi2: null, // 年干支
      monthGanZhi2: null, // 月干支
      dayGanZhi2: null, // 日干支
      hourGanZhi2: null // 时干支
    }
  },
  watch: {
    sex(val) {
      // this.dataD.sex = (val === 0) ? '女' : '男'
    },
    date(val) {
      this.starts(true) // 开始排盘（默认数据）
    },
    dateType(val) {
      if (val !== 1) {
        this.leapMonth = false
      }
      if (val === 2) {
        this.getNowGanZhi() // 获取当前日期干支
      }
      if (val !== 2) {
        this.starts(true) // 开始排盘（默认数据）
      }
    },
    leapMonth(val) {
      this.starts(true) // 开始排盘（默认数据）
    },
    trueSolar(val) {
      if (val) this.elMessage(3000, true, 'warning', '真太阳时暂不可用')
    },
    addressName(val) {
      // this.starts(true) // 开始排盘（默认数据）
    },
    qiGuaMode(val) {
      this.starts(true) // 开始排盘（默认数据）
      this.dateStatus = (val === 0 ? true : false)
    },
    liuYao(val) {
      this.starts(true) // 开始排盘（默认数据）
    },
    wuYao(val) {
      this.starts(true) // 开始排盘（默认数据）
    },
    siYao(val) {
      this.starts(true) // 开始排盘（默认数据）
    },
    sanYao(val) {
      this.starts(true) // 开始排盘（默认数据）
    },
    erYao(val) {
      this.starts(true) // 开始排盘（默认数据）
    },
    yiYao(val) {
      this.starts(true) // 开始排盘（默认数据）
    },
    beginYear(val) {
      if (val <= 0 || val === '') {
        this.beginYear = 1
      } else if (val > 9999) {
        this.beginYear = 9999
      }
    },
    siZhuDialog(val) {
      if (!val) {
        this.dateType = 0 // 日期类型转为公历
      }
    }
  },
  created() {
    this.date = new Date() // 初始化日期
    // this.starts(true) // 开始排盘（默认数据）
  },
  mounted() {

  },
  methods: {

    /* 选项区域操作 */

    /**
     * 获取地区名称
     * 
     * @param {list} data 地区数据集合
     */
    getAddressName(data) {
      this.addressName = data.n
    },

    /**
     * 重置选项
     */
    resetting() {
      this.name = '' // 姓名
      this.occupy = '' // 占事
      this.sex = 1 // 性别
      this.date = new Date() // 日期
      this.dateType = 0 // 日期类型
      this.leapMonth = false // 是否闰月
      this.trueSolar = false // 是否真太阳时
      this.address = '110000' // 地区：城市编码
      this.addressName = '北京市' // 地区：城市名称
      this.qiGuaMode = 0 // 起卦模式
      this.liuYao = 0 // 上爻（六爻）
      this.wuYao = 0 // 五爻
      this.siYao = 0 // 四爻
      this.sanYao = 0 // 三爻
      this.erYao = 0 // 二爻
      this.yiYao = 0 //初爻（一爻）
      this.yearGanZhiSet = 1 // 年干支设置
      this.monthGanZhiSet = 1 // 月干支设置
      this.dayGanZhiSet = 1 // 日干支设置
      this.hourGanZhiSet = 0 // 时干支设置
      this.dateStatus = true // 日期可选状态
    },

    //**********************************************************************************

    /* 数据区域操作 */

    /**
     * 开始排盘
     * 
     * @param {boolean} example 是否为默认数据（true:是。false:否）
     */
    starts(example) {
      this.reLoadingButton = false // 重新加载按钮状态：禁用
      // this.startsButton = true // 排盘按钮状态：正在排盘
      setTimeout(() => {
        // 构造条件
        let query = {
          name: this.name, // 姓名
          occupy: this.occupy, // 占事
          sex: this.sex, // 性别
          date: this.date, // 日期
          dateType: this.dateType, // 日期类型
          address: this.addressName, // 地区名称
          leapMonth: this.leapMonth === true ? 1 : 0, // 是否闰月
          qiGuaMode: this.qiGuaMode, // 起卦模式
          liuYao: this.liuYao, // 上爻（六爻）
          wuYao: this.wuYao, // 五爻
          siYao: this.siYao, // 四爻
          sanYao: this.sanYao, // 三爻
          erYao: this.erYao, // 二爻
          yiYao: this.yiYao, // 初爻（一爻）
          yearGanZhiSet: this.yearGanZhiSet, // 年干支设置
          monthGanZhiSet: this.monthGanZhiSet, // 月干支设置
          dayGanZhiSet: this.dayGanZhiSet, // 日干支设置
          hourGanZhiSet: this.hourGanZhiSet, // 时干支设置
        }
        // 发送请求
        startsApi(query).then((res) => {
          if (String(res.data.code) === '200') {
            if (null !== res.data.data) {
              if (example) {
                // 1、默认数据：更改默认数据状态
                this.dataDStatus = true // 默认数据状态（true:存在。false:不存在）
                this.startsButton = false // 排盘按钮状态：未排盘
                this.dataD = res.data.data // 默认数据
              } else {
                // 2、完整数据：更改完整数据状态
                this.dataStatus = true // 完整数据状态（true:存在。false:不存在）
                this.startsButton = false // 排盘按钮状态：未排盘
                this.data = res.data.data // 完整数据
                this.initializeDaYunLiuNian() // 初始化大运流年
              }
              this.reLoadingButton = true // 重新加载按钮状态：启用
              // this.elMessage(3000, true, 'success', res.data.msg || '操作成功')
            } else {
              this.startsButton = false // 排盘按钮状态：未排盘
              this.reLoadingButton = true // 重新加载按钮状态：启用
              // this.elMessage(3000, true, 'error', res.data.msg || '操作失败')
            }
          } else {
            this.startsButton = false // 排盘按钮状态：未排盘
            this.reLoadingButton = true // 重新加载按钮状态：启用
            // this.elMessage(3000, true, 'error', res.data.msg || '操作失败')
          }
        }).catch(() => {
          this.startsButton = false // 排盘按钮状态：未排盘
          this.reLoadingButton = true // 重新加载按钮状态：启用
          // this.elMessage(3000, true, 'error', '加载失败')
        })
      }, this.startsDelayTime)
    },

    /**
     * 获取当前日期干支
     */
    getNowGanZhi() {
      // 构造条件
      let query = {
        date: new Date(), // 日期
        yearGanZhiSet: this.yearGanZhiSet, // 年干支设置
        monthGanZhiSet: this.monthGanZhiSet, // 月干支设置
        dayGanZhiSet: this.dayGanZhiSet, // 日干支设置
        hourGanZhiSet: this.hourGanZhiSet // 时干支设置
      }
      // 发送请求
      getNowGanZhiApi(query)
        .then((res) => {
          if (String(res.data.code) === '200') {
            if (null !== res.data.data) {
              this.beginYear = 1900
              this.yearGanZhi = res.data.data[0]
              this.monthGanZhi = res.data.data[1]
              this.dayGanZhi = res.data.data[2]
              this.hourGanZhi = res.data.data[3]
              this.yearGanZhi2 = res.data.data[0]
              this.monthGanZhi2 = res.data.data[1]
              this.dayGanZhi2 = res.data.data[2]
              this.hourGanZhi2 = res.data.data[3]
              this.siZhuDialog = true // 显示四柱转日期弹窗
              if (!this.siZhuDialog) this.dateType = 0 // 若四柱转日期弹窗未显示，则将日期类型转为公历
            }
          }
        }).catch(() => {
          this.dateType = 0 // 日期类型转为公历
        })
    },

    /**
     * 通过四柱获取日期
     */
    getSiZhuToDate() {
      // 构造条件
      let query = {
        beginYear: this.beginYear, // 起始年份
        yearGanZhi: this.yearGanZhi, // 年干支
        monthGanZhi: this.monthGanZhi, // 月干支
        dayGanZhi: this.dayGanZhi, // 日干支
        hourGanZhi: this.hourGanZhi, // 时干支
        yearGanZhiSet: this.yearGanZhiSet, // 年干支设置
        monthGanZhiSet: this.monthGanZhiSet, // 月干支设置
        dayGanZhiSet: this.dayGanZhiSet, // 日干支设置
        hourGanZhiSet: this.hourGanZhiSet // 时干支设置
      }
      this.beginYear2 = this.beginYear
      this.siZhuButton = true
      // 发送请求
      ganZhiToDateApi(query)
        .then((res) => {
          if (String(res.data.code) === '200') {
            if (null !== res.data.data) {
              if (res.data.data.length !== 0) {
                this.siZhuToDate = res.data.data
                this.siZhuToDateTotal = res.data.data.length
                this.siZhuButton = false
              } else {
                this.siZhuToDate = {}
                this.siZhuToDateTotal = 0
                this.siZhuButton = false
                this.elMessage(3000, true, 'error', '没有和【' + this.yearGanZhi + ' ' + this.monthGanZhi + ' ' + this.dayGanZhi + ' ' + this.hourGanZhi + '】相匹配的日期')
              }
            }
          } else {
            this.siZhuToDate = {}
            this.siZhuToDateTotal = 0
            this.elMessage(3000, true, 'error', res.data.msg || '操作失败')
          }
        }).catch(() => {
          this.siZhuToDate = {}
          this.siZhuToDateTotal = 0
          // this.elMessage(3000, true, 'error', '操作失败')
        })
    },

    /**
     * 设置新日期
     * 
     * @param {string} newDate 公历日期
     */
    setNewDate(newDate) {
      this.date = dateFormatter1(newDate)
      this.siZhuDialog = false // 关闭四柱转日期弹窗
      this.elMessage(3000, true, 'success', '日期已设置')
    },

    //**********************************************************************************

    /* 通用操作 */

    /**
     * 五行颜色
     * 
     * @param {string} wuXing 五行
     */
    WuXingColor(wuXing) {
      let w1 = wuXing.substring(0, 1) // 五行1
      let w2 = wuXing.substring(1, 2) // 五行2
      let newW = '' // 新五行

      if ('木' === w1) {
        w1 = wuXing.replace(wuXing, '<font color="#07DA30">' + w1 + '</font>')
      }
      if ('火' === w1) {
        w1 = wuXing.replace(wuXing, '<font color="#d30505">' + w1 + '</font>')
      }
      if ('土' === w1) {
        w1 = wuXing.replace(wuXing, '<font color="#8b6d03">' + w1 + '</font>')
      }
      if ('金' === w1) {
        w1 = wuXing.replace(wuXing, '<font color="#ef9104">' + w1 + '</font>')
      }
      if ('水' === w1) {
        w1 = wuXing.replace(wuXing, '<font color="#2e83f6">' + w1 + '</font>')
      }

      if ('木' === w2) {
        newW = w1 + wuXing.replace(wuXing, '<font color="#07DA30">' + w2 + '</font>')
      }
      if ('火' === w2) {
        newW = w1 + wuXing.replace(wuXing, '<font color="#d30505">' + w2 + '</font>')
      }
      if ('土' === w2) {
        newW = w1 + wuXing.replace(wuXing, '<font color="#8b6d03">' + w2 + '</font>')
      }
      if ('金' === w2) {
        newW = w1 + wuXing.replace(wuXing, '<font color="#ef9104">' + w2 + '</font>')
      }
      if ('水' === w2) {
        newW = w1 + wuXing.replace(wuXing, '<font color="#2e83f6">' + w2 + '</font>')
      }

      return newW
    },

    /**
     * 消息提示
     * 
     * @param {number} duration 显示时间（单位：毫秒）
     * @param {boolean} showClose 是否可关闭（true:是。false:否）
     * @param {string} type 消息类型（success、warning、error）
     * @param {string} message 提示内容
     */
    elMessage(duration, showClose, type, message) {
      ElMessage({
        duration: duration,
        showClose: showClose,
        type: type,
        message: message,
        plain: true
      })
    }

  }

}
